<template>
  <div id="login-body">
    <div id="login-panel">
      <div id="login-title">用户登录</div>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="80px">
        <el-form-item label="用户名" prop="username" for="loginUser">
          <el-input v-model="loginForm.username" id="loginUser" maxlength="10" minlength="2"
                    placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')" >
          </el-input>
        </el-form-item>
        <el-form-item label="密&ensp;&ensp;码" prop="password" for="loginPassword">
          <el-input v-model="loginForm.password" id="loginPassword" maxlength="16" minlength="6"
                    placeholder="请输入密码" @keyup.enter.native="submitForm('loginForm')" >
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha" for="loginCaptcha">
          <div id="captcha-panel" style="width: 100%;align-content: center;display: flex;margin-right: 0; ">
            <el-input v-model="loginForm.captcha" id="loginCaptcha" minlength="4" maxlength="8"
                      style="flex: 1; margin-right: 1px;" placeholder="请输入验证码" @keyup.enter.native="submitForm('loginForm')">
            </el-input>
            <img :src="captchaURL" id="check-code"  @click="flushCaptcha" style="height: 30px;cursor: pointer;" title="点击刷新,验证码有效期为一分钟" alt="验证码"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm('loginForm')">登陆</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        captcha: ""
      },
      captchaURL: "/api/captchaCode",
      userInfo: {},
      redirect: undefined, //登陆跳转的链接设置
      loginRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 1 到 10 之间', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 16, message: '长度在 6 到 16 之间', trigger: 'blur'}
        ],
        captcha: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 4, max: 6, message: '长度在 4 到 6 之间', trigger: 'blur'}
        ],
      },
    };
  },
  methods: {
    submitForm(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.userInfo = {
            username: this.loginForm.username,
            password: this.loginForm.password,
            captcha: this.loginForm.captcha
          }
          this.$store.dispatch('LOGIN', this.userInfo).then(() => {
            this.$router.replace({path: this.redirect || "/"}
            ).catch(() => {
            });
          }).catch(() => { this.flushCaptcha()
          })
        }
      });
    },
    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
    },
    flushCaptcha() {
      this.captchaURL = this.captchaURL + "?" + new Date().getTime();
    },
  },
}
</script>
<style scoped>
#login-body {
  width: calc(100vw);
  height: calc(100vh);
  background-size: cover;
  background-position: center;
  background-image: url(/001.jpg);
}

#login-panel {
  position: fixed;
  width: 350px;
  top: 35%;
  left: 35%;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 5px 5px 20px rgb(133, 77, 77);
  background-color: rgba(255, 255, 255, 0.6);
}

#login-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.62);
}
</style>